<template>
  <view class="page">

    <!-- 头部 -->
    <u-sticky offset-top="0" :bgColor="bgColor">
      <image class="page-bg2 v2" mode="widthFix" :src="imageUrl + 'hg-bg3.png'"></image>
      <u-navbar leftText="车后市场" title=" " @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
                :bgColor="bgColor"></u-navbar>
      <view class="wp">
        <u-search placeholder="请输入门店名称" height="64rpx" bgColor="#F5F6F7" color="#1C274C"
                  searchIconColor="rgba(28, 39, 76, 0.6)" placeholderColor="rgba(28, 39, 76, 0.6)" :showAction="false"
                  :clearabled="true" v-model="searchValue">
        </u-search>
      </view>
      <view class="tabs-hg1">
        <u-tabs :list="tabs1" @change="change" lineWidth="20" lineColor="linear-gradient(90deg, #00BBFF, #5ADA7A)"
                :activeStyle="{
						fontSize: '32rpx',
						color: '#1C274C',
						fontWeight: 'bold',
					}" :inactiveStyle="{
						fontSize: '32rpx',
						color: 'rgba(28, 39, 76, 0.6)',
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 106rpx;">
        </u-tabs>
      </view>
    </u-sticky>

    <!-- 主内容 -->
    <view class="page-content">
      <view class="wp">

        <view class="lst-hg8">
          <view class="item" @click="go(item)" v-for="(item, index) in searchResult" :key="index">
            <view class="left">
              <image class="pic" mode="aspectFill" :src="item.image"></image>
            </view>
            <view class="center">
              <view class="t1">{{item.name}}</view>
              <view class="t2">
                <text v-for="(key, i) in item.typeKeyword" :key="i">{{key}}</text>
              </view>
              <view class="t3">
                <image class="icon" mode="widthFix" :src="imageUrl + 'hg-addr1.png'"></image>
                {{item.address}}
              </view>
            </view>
            <view class="right" >
              <image class="icon" mode="widthFix" :src="imageUrl + 'hg-point2.png'" ></image>
              <view class="t1">{{item.parkToUserDistance}}km</view>
            </view>
          </view>
        </view>

      </view>
    </view>

  </view>

</template>

<script>
import {
  get,
  getParams
} from '../../api/myHttps.js';
// import mapBox from '@/components/map.vue';

export default {
  // components: {
  //   mapBox
  // },
  data() {
    return {
      // 头部背景色
      bgColor: 'transparent',

      // 搜索
      searchValue: '',
      // 切换
      tabs1: [],
      tabsIndex: 0,
      serviceStoreList: []
    }
  },
	computed: {
	  searchResult() {
	    // 如果搜索值为空，则返回全部停车场列表
	    if (!this.searchValue) {
	      return this.serviceStoreList;
	    }
	
	    // 根据搜索值过滤serviceStoreList，并返回过滤后的结果
	    return this.serviceStoreList.filter(item => {
	      // 使用includes方法进行模糊匹配
	      return item.name.toLowerCase().includes(this.searchValue.toLowerCase());
	    }).map(item => {
	      // 对于匹配到的部分，可以使用HTML标签包裹以改变颜色或样式
	      let searchRegex = new RegExp(`(${this.escapeRegExp(this.searchValue)})`, 'gi');
	      item.highlightedName = item.name.replace(searchRegex, '<span style="color:red">$1</span>');
	      return item;
	    });
	  },
	},
  onLoad() {
    this.getServiceStoreType();
    setTimeout(() => {
      this.getServiceStoreList(this.tabsIndex);
    }, 500);
  },
  methods: {
		// 添加此方法用于转义正则表达式中的特殊字符
		escapeRegExp(string) {
		  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $&表示匹配整个字符串
		},
    getServiceStoreType() {
      get('/city-mobile/serviceStore/getServiceStoreType').then((res) => {
        this.tabs1 = res;
        this.tabsIndex = this.tabs1[0].id
      })
    },
    go(item) {
      uni.navigateTo({
        url: '/pages/carMarketDet/carMarketDet?item=' + encodeURIComponent(JSON.stringify(item))
      })
    },
    change(data) {
      this.tabsIndex = data.id
      this.getServiceStoreList(this.tabsIndex);
    },
    getServiceStoreList(typeid) {
      let params = {
        typeid: typeid,
        userLongitude: uni.getStorageSync("userLongitude"),
        userLatitude: uni.getStorageSync("userLatitude")
      }
      getParams('/city-mobile/serviceStore/getServiceStoreList', params).then((res) => {
        this.serviceStoreList = res;
        for (let i = 0; i < this.serviceStoreList.length; i++) {
          this.serviceStoreList[i].typeKeyword = this.serviceStoreList[i].typeKeyword.split(',');
        }
      })

    },

  }
}
</script>

<style lang="scss">
page {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  background: #F4FAF7;
}

::v-deep .u-tabs__wrapper__nav__item {
  flex-grow: 1 !important;
}

::v-deep .u-tabs__wrapper__nav__line {
  bottom: 10rpx;
}
</style>